import React, { useEffect, useState } from "react";
import { Fragment } from "react/cjs/react.production.min";
import "./index.css";

export default function Guide(props) {
  const [guideClass,setGuideClass]=useState('');
  useEffect(()=>{
    const hasShowGuide=localStorage.getItem("showGuide");
    //如果没有显示过guide的化，显示一次
    if(!hasShowGuide){
      setGuideClass('animate');
    }
  },[])
  const handleGuideClose=()=>{
    setGuideClass('');
    localStorage.setItem("showGuide",true);
  }
  return (
    <Fragment>
      <div className={`modal ${guideClass}`}>
        <div className="content">
          <h1>应用介绍</h1>
          <p>这是一个在线阅读书籍的网站，可以通过点击左上方的区域添加本地书籍，并点击书籍进行阅读. </p>
          <button className="trigger" onClick={()=>handleGuideClose()}>Ok, I know</button>
        </div>
      </div>
      ,
    </Fragment>
  );
}
